@{
   ListModel _model = (ListModel)Model;
   List<PostItem> _featured = _model.Posts.Where(p => p.Featured).Take(3).ToList();
}

@if(_featured != null)
{
<div id="carouselFeatured" class="featured carousel slide carousel-dark" data-bs-ride="carousel" aria-label="Slideshow">
    <div class="carousel-inner">
        @for (int i = 0; i < _featured.Count; i++)
        {
            string active = i == 0 ? "active" : "";
            PostItem item = _featured[i];

            <div class="carousel-item @active">
                <article class="featured-item row">
                    <section class="col-lg-7">
                        <figure class="featured-cover" aria-hidden="true">
                            <a href="~/posts/@item.Slug" class="featured-cover-link" tabindex="-1">
                                <img class="featured-cover-img" alt="POST_TITLE" src="~/@item.Cover">
                            </a>
                            <figcaption class="visually-hidden">@item.Title</figcaption>
                        </figure>
                    </section>
                    <section class="featured-content col-lg-5 my-auto">
                        <h2 class="featured-title">
                            <a class="featured-link" href="~/posts/@item.Slug">@item.Title</a>
                        </h2>
                        <div class="featured-meta d-none d-md-flex">
                            <div class="featured-author">
                                <img class="featured-author-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' width='250' height='250'%3E%3Crect width='250' height='250' fill='%23622aff'%3E%3C/rect%3E%3Ctext x='50%' y='53%' dominant-baseline='middle' text-anchor='middle' font-family='Arial, sans-serif' font-size='128px' fill='%23ffffff'%3EA%3C/text%3E%3C/svg%3E" width="16" height="16" alt="John Doe">
                                <span class="featured-author-name">@item.Author.DisplayName</span>
                            </div>
                            <div class="featured-date">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar-event featured-date-icon" viewBox="0 0 16 16">
                                    <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
                                    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                                </svg>
                                <time class="featured-date-time">@item.Published.ToFriendlyShortDateString()</time>
                            </div>
                            @if(item.Categories != null)
                            {
                            <div class="featured-cat">
                                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor" class="bi bi-hash featured-cat-icon" viewBox="0 0 16 16">
                                    <path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z" />
                                </svg>
                                @foreach (var cat in item.Categories)
                                {
                                <a class="featured-cat-title" href="~/categories/@cat.Content" tabindex="-1">@cat.Content</a>
                                }
                            </div>
                            }
                        </div>
                        <p class="featured-desc">
                            @item.Description
                        </p>
                        <a class="featured-more" href="~/posts/@item.Slug">
                            Read More
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
                            </svg>
                        </a>
                    </section>
                </article>
            </div>
        }
    </div>
    <button class="carousel-control-next featured-next d-none d-xl-block" type="button" data-bs-target="#carouselFeatured" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    <button class="carousel-control-prev featured-prev d-none d-xl-block" type="button" data-bs-target="#carouselFeatured" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
</div>
}
